<template>
	<div>

		<div class="item-view" v-for="item in commentList" :key="item._id">
			<div class="item-left">
				<span class="item-contenttext">{{item.content}}</span>
				<div class="left-bottom-view">

					<div class="item-nickname-layout">
						<el-avatar :size="30" :src="$mConfig.formatFileUrl(item.headicon)" />
						<span class="item-nickname">{{item.nickname}}</span>
					</div>

					<div>
						<span class="item-datetext">{{item.startTime}}</span>

						<el-button type="danger" size="small" @click="remove(item._id)">删除</el-button>
					</div>

				</div>
			</div>
			<div class="item-right">
				<el-image style="width: 95px; height: 130px; border-radius: 5px; "
					:src="$mConfig.formatFileUrl(item.cover)" mode="scaleToFill" />
				<span class="title">{{item.movieName}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				commentList: []
			}
		},
		methods: {
			async fetch() {
				const res = await this.http.get("admin/comments/commentsall");
				console.log(res.data)
				this.commentList = res.data.list;
			},
			async remove(_id){
				this.$confirm(`是否删除该评论?`, "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(async () => {
						const res = await this.http.post(`admin/comments/list/${_id}`)
						this.$message({
							type: "success",
							message: "删除成功!"
						});
						this.fetch();
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			}
		},
		mounted() {
			this.fetch();
		}
	}
</script>

<style lang="scss" scoped>
	.item-view {
		display: flex;
		flex-direction: row;
		padding: 15px;
		justify-content: space-between;
		background-color: white;
		border-radius: 5px;
		margin-left: 8px;
		margin-right: 8px;
		margin-top: 8px;

		.item-left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 73%;

			.item-contenttext {
				font-size: 14px;
				color: #333;
				padding-bottom: 15px;
				margin-right: 15px;
			}

			.left-bottom-view {
				display: flex;
				align-items: center;
				padding-top: 10px;
				padding-right: 20px;
				justify-content: space-between;
				font-size: 12px;
				border-top: #eeeeee solid 1px;
				color: #999;

				.item-nickname-layout {
					display: flex;
					align-items: center;

					.item-nickname {
						margin-left: 10px;
					}
				}
				
				.item-datetext{
					margin-right: 10px;
				}
			}
		}

		.item-right {
			width: 27%;
			display: flex;
			padding-left: 20px;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-left: #eeeeee solid 1px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			.title {
				margin-top: 10px;
				width: 100%;
				text-align: center;
				font-size: 14px;
				color: #333;
				margin-left: 10px;
				margin-right: 10px;
			}
		}

	}
</style>
